<template>
  <div>
          <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top:10px">
          <el-card shadow="hover">
            <div class="user">
              <img src="../assets/图片1.png" alt="" height="200px"></div>
              <div class="userinfo">
                <p class="name">重庆城市科技学院</p> 
            </div>
          </el-card>
        </el-col>

        <el-col :span="5" style="margin-top:10px">
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">毕业生人数:<span class="ziti">{{userlist.length}}</span></span>
          </el-card>
        </el-col>

            <el-col :span="5" style="margin-top:10px">
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">就业人数:<span class="ziti">{{add}}</span></span>
          </el-card>
        </el-col>
        
            <el-col :span="5" style="margin-top:10px" >
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">平均工资:<span class="zitii">{{qian/add}}</span></span>
          </el-card>
        </el-col>

        <el-col :span="5" style="margin-top:10px" >
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">就业满意度:<span class="zitiii">{{(manyi/userlist.length)*100}}%</span></span>
          </el-card>
        </el-col>

            <el-col :span="5" style="margin-top:10px" >
          <el-card shadow="hover">
            <i class="el-icon-user-solid" ></i>
            <span class="biye">失业率:<span class="zitii">{{(add/userlist.length)*100}}%</span></span>
          </el-card>
        </el-col>

      </el-row>

        <div>
          <el-row :gutter="20" class="bbb">
          <el-col :span="5">
            <el-card  ><span @click="addd()">优秀的毕业生就业</span></el-card>
          </el-col>
          </el-row>

          <el-table :data="youxiulist" border stripe >
            <el-table-column type="index"></el-table-column>
            <el-table-column label="学号" prop="xuehao"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="专业" prop="zhuanye"></el-table-column>
            <el-table-column label="就业岗位" prop="gangwei"></el-table-column>
            <el-table-column label="薪资" prop="money"></el-table-column>

        </el-table>
      </div>
      


  </div>
</template>

<script>
export default {
  data() {
    return {
      userlist:[],
      youxiulist:[],
      add:0,
      qian:0,
      shiye:0,
      manyi:0,
      bumanyi:0,
      y:0
    }
  },

  created() {
    this.getUserList()
  },
  mounted(){
this.addd()
this.money()
  },
  methods: {
        getUserList(){
          this.$http.get('/getlist').then(res=>{

       this.userlist=res.data

        for(let i in this.userlist){
          console.log(231);
        if(this.userlist[i].manyi == '满意'){
          this.manyi++
        }else{
          this.bumanyi++
        }
      }
      })
     },

     addd(){
        var userlist = JSON.parse(localStorage.getItem('userlist'))
        for(let i in userlist){
         if(userlist[i].money >= '7000'){
           this.youxiulist[this.y]=userlist[i]
           this.y++
         }
       }
     },
     money(){
       var userlist = JSON.parse(localStorage.getItem('userlist'))
      for(let i in userlist){
        if(userlist[i].jiuye == '是'){
          this.add++,
          this.qian=userlist[i].money+this.qian
        }
      }
     }
  },
}
</script>

<style>
.user{
  float: left;
  width: 200px;
  height: 200px;

}
.userinfo{
  float: left;
  margin-top: 50px;
  margin-left: 10px;
}
.name{
  font-size: 20px;
  font-weight: bold;
}
.biye{
  margin-left: 10px;
}
.ziti{
  
  color: red;
  margin-left: 20px;
}
.zitii{
  color: red;
  margin-left: 10px;
}
.zitiii{
  color: red;
}
.bbb{
  margin-top: 20px;
  font-weight: bold;
}
</style>